<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-row>
          <el-col :span="5">
            <el-button
              type="primary"
              class="handle-del mr10"
              @click="delAllSelection"
              >新增产品编码</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column prop="stype_name" label="商品类目"></el-table-column>
        <el-table-column prop="code" label="商品编码"></el-table-column>
        <el-table-column prop="template" label="模具号"></el-table-column>
        <el-table-column prop="Colour_name" label="成色"></el-table-column>
        <el-table-column prop="attribute_name" label="属性"></el-table-column>
        <el-table-column prop="stylesort_name" label="款式"></el-table-column>
        <el-table-column prop="provider_name" label="供应商"></el-table-column>
        <el-table-column prop="create_date" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button type="text" @click="img1(scope.row)">详细信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!--新增框弹出-->
    <el-dialog title="新增编辑" :visible.sync="addVisible" width="80%">
      <el-form
        ref="form"
        :model="form"
        label-width="70px"
        :inline="true"
        size="mini"
      >
        <el-form-item label="商品类目">
          <el-select v-model="value_leixing">
            <el-option
              v-for="item in options_leixing"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成色">
          <el-select v-model="value_chengse">
            <el-option
              v-for="item in options_chengse"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="属性">
          <el-select v-model="value_shuxing">
            <el-option
              v-for="item in options_shuxing"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="value_gongyingshang">
            <el-option
              v-for="item in options_gongyingshang"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="款式">
          <el-select v-model="value_kuanshi">
            <el-option
              v-for="item in options_kuanshi"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片上传" :label-width="formLabelWidth">
          <div class="viewPhoto">
            <img src alt ref="portrait" class="img_shangchuan" />
          </div>
          <!-- 提交图片文件的按钮 -->
          <input type="file" ref="saveImage" name="file" id="input1" />
          <div id="div2" @click="div2" ref="div2">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!--  修改-->
    <el-dialog title="修改编辑" :visible.sync="editVisible" width="60%">
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-form-item label="ID">
          <el-input v-model="form.id" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="商品类目">
          <el-input v-model="form.type_name" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="成色">
          <el-input v-model="form.Colour_name" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="属性">
          <el-input
            v-model="form.attribute_name"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="form.provider_name" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="款式">
          <el-input
            v-model="form.stylesort_name"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品详情">
          <div id="tupian">
            <img
              :src="'http://172.16.6.125:8080/gold/static/img/' + form.url"
              alt=""
              id="xiangqing"
            />
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "table",
  data() {
    return {
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 4
      },
      ab: null,
      addVisible: false,
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      inputinfo: "",
      options_leixing: [],
      options_shuxing: [],
      options_gongyingshang: [],
      options_chengse: [],
      options_kuanshi: [],
      value: "",
      value_leixing: "",
      value_shuxing: "",
      value_gongyingshang: "",
      value_chengse: "",
      value_kuanshi: "",
      url: ""
    };
  },
  created() {
    this.getData();
    this.getData_leixing();
    this.getData_shuxing();
    this.getData_gongyingshang();
    this.getData_chengse();
    this.getData_kuanshi();
  },
  mounted() {},
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.$axios
        .post(
          this.$api.table.findall,
          {
            currentPage: this.query.pageIndex,
            pageSize: this.query.pageSize
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          var result = response.data.data;
          this.list1 = result.list;
          for (var i = 0; i < this.list1.length; i++) {
            var timestamp = response.data.data.list[i].create_date;
            var date = new Date(timestamp).toLocaleDateString();
            this.list1[i].create_date = date;
          }
          let res = {
            list: this.list1,
            pageTotal: result.total
          };
          this.tableData = res.list;
          this.pageTotal = res.pageTotal || 50;
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    getData_leixing() {
      this.$axios
        .post(this.$api.table.findGoodStypeName, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          for (var i = 0; i < response.data.data.length; i++) {
            var obj = {};
            obj.value = response.data.data[i].stype_name;
            obj.label = response.data.data[i].stype_name;
            this.options_leixing.push(obj);
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    getData_shuxing() {
      this.$axios
        .post(this.$api.table.findGoodsAttributeName, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          for (var i = 0; i < response.data.data.length; i++) {
            var obj = {};
            obj.value = response.data.data[i].attribute_name;
            obj.label = response.data.data[i].attribute_name;
            this.options_shuxing.push(obj);
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    getData_gongyingshang() {
      this.$axios
        .post(this.$api.table.findProviderName, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          for (var i = 0; i < response.data.data.length; i++) {
            var obj = {};
            obj.value = response.data.data[i].provider_name;
            obj.label = response.data.data[i].provider_name;
            this.options_gongyingshang.push(obj);
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    getData_chengse() {
      this.$axios
        .post(this.$api.table.findGoodsColourName, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          for (var i = 0; i < response.data.data.length; i++) {
            var obj = {};
            obj.value = response.data.data[i].Colour_name;
            obj.label = response.data.data[i].Colour_name;
            this.options_chengse.push(obj);
          }
          console.log(this.options_gongyingshang);
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    getData_kuanshi() {
      this.$axios
        .post(this.$api.table.findStyleSortName, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          console.log(response);
          for (var i = 0; i < response.data.data.length; i++) {
            var obj = {};
            obj.value = response.data.data[i].stylesort_name;
            obj.label = response.data.data[i].stylesort_name;
            this.options_kuanshi.push(obj);
          }
          console.log(this.options_kuanshi);
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    great() {
      this.$refs.saveImage.onchange = () => {
        console.log("111111111111111");
        var imgFile = this.$refs.saveImage.files[0];
        var fr = new FileReader();
        let content = new FormData();
        content.append("file", imgFile);
        fr.onload = () => {
          console.log("2222222222222222");
          this.$refs.portrait.src = fr.result;
          this.$axios
            .post(this.$api.table.upload, content, {
              headers: { "Content-Type": "multipart/form-data" }
            })
            .then(res => {
              console.log(res);
              this.url = res.data.data.split("/")[2];
              console.log(this.url);
            });
        };
        fr.readAsDataURL(imgFile);
      };
    },
    img1(row) {
      this.editVisible = true;
      console.log(row.id);
      this.$axios
        .post(this.$api.table.findById + row.id, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log((this.form = res.data.data));
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      console.log(row.id);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(this.$api.table.delid + row.id, {
              headers: {
                "Content-Type": "application/json"
              }
            })
            .then(response => {
              console.log(response.data);
              this.$message.success(response.data.msg);
              this.getData();
            })
            .catch(err => {
              console.log(err);
              this.$alert("请求出错");
            });
        })
        .catch(() => {});
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      this.addVisible = true;
      this.$nextTick(() => {
        this.great();
      });
    },
    // 编辑操作
    handleEdit(index, row) {
      this.editVisible = true;
      this.idx = index;
      this.form = { ...row };
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$axios
        .post(this.$api.table.save, JSON.stringify(this.form), {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.$message.success(`修改第 ${this.idx + 1} 行成功`);
          this.getData();
        });
      this.form = {};
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    addEdit() {
      this.addVisible = false;
      console.log({
        stype_name: this.value_leixing,
        attribute_name: this.value_shuxing,
        provider_name: this.value_gongyingshang,
        Colour_name: this.value_chengse,
        stylesort_name: this.value_kuanshi,
        url: this.url
      });
      this.$axios
        .post(
          this.$api.table.save,
          {
            stype_name: this.value_leixing,
            attribute_name: this.value_shuxing,
            provider_name: this.value_gongyingshang,
            Colour_name: this.value_chengse,
            stylesort_name: this.value_kuanshi,
            url: this.url
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res);
          this.$message.success(`修改第 ${this.idx + 1} 行成功`);
          this.getData();
        });
      this.form = {};
    },
    div2() {
      console.log(this.$refs.saveImage);
      this.$refs.saveImage.click();
      this.$refs.div2.style.display = "none";
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.input1 {
  width: 50px;
}
.img_shangchuan {
  width: 200px;
  height: 200px;
}
#xiangqing {
  width: 200px;
  height: 200px;
}
#tupian {
  width: 200px;
  height: 200px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
#div2 {
  border: 1px dashed;
}
#input1 {
  display: none;
}
</style>
